<template>
    <div>
        <Dialog :show="dialogConfig.show" :title="dialogConfig.title" :buttons="dialogConfig.buttons" width="400px"
            :showCancel="false" @close="dialogConfig.show = false">
            <el-form :model="formData" :rules="rules" ref="formDataRef" label-width="80px" @submit.prevent>
                <el-form-item label="标题">
                    {{ formData.title }}
                </el-form-item>
                <!--板块-->
                <el-form-item label="板块" prop="boardIds">
                    <el-cascader placeholder="请选择板块" :options="boardList" :props="boardProps" clearable
                        v-model="formData.boardIds" :style="{ width: '100%' }" />
                </el-form-item>
            </el-form>
        </Dialog>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();

// api
const api = {
    loadBoard: "/board/loadBoard",
    updateBoard: '/forum/updateBoard'
}

//弹框配置
const dialogConfig = reactive({
    show: false,
    title: "修改板块",
    buttons: [
        {
            type: "primary",
            text: "确定",
            click: (e) => {
                submitForm();
            },
        },
    ],
});

//表单数据
const formData = ref({});
const formDataRef = ref();
const rules = {
    boardIds: [{ required: true, message: "请选择板块" }],
}

// 板块信息
const boardProps = {
    multiple: false,
    checkStrictly: true,
    value: 'boardId',
    label: 'boardName'
}
const boardList = ref([])
//获取板块数据
const loadBoardList = async () => {
    let result = await proxy.request({
        url: api.loadBoard
    })
    if (!result) {
        return
    }
    boardList.value = result.data
}
loadBoardList();

const emit = defineEmits(['reload'])

//提交表单
const submitForm = () => {
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return
        }
        let params = {
            articleId: formData.value.articleId,
        }

        Object.assign(params, formData.value)

        if (params.boardIds && params.boardIds.length == 1) {
            params.pBoardId = params.boardIds[0]
        } else if (params.boardIds && params.boardIds.length > 1) {
            params.pBoardId = params.boardIds[0]
            params.boardId = params.boardIds[1]
        }
        //删除没用的字段
        delete params.boardIds
        let result = await proxy.request({
            url: api.updateBoard,
            params: params
        })
        if (!result) {
            return
        }
        dialogConfig.show = false

        //通知父组件刷新数据
        emit('reload')
    })

}

//对外暴露的方法
const updateBoard = (data) => {
    dialogConfig.show = true;
    nextTick(() => {
        // 重置表单
        formDataRef.value.resetFields();
        data.boardIds = []
        data.boardIds.push(data.pBoardId)
        if (data.boardId != null && data.boardId != 0) {
            data.boardIds.push(data.boardId)
        }
        formData.value = data
    })
}
defineExpose({ updateBoard })

</script>

<style scoped lang="scss"></style>